<template>
  <div class="my-activities-container">
    <div class="page-header">
      <h2>我报名的活动</h2>
    </div>

    <!-- 筛选表单 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="searchParams" class="activity-filter-form">
        <div class="form-content">
          <el-form-item label="活动名称">
            <el-input v-model="searchParams.keyword" placeholder="输入活动名称关键词" clearable></el-input>
          </el-form-item>
          <el-form-item label="报名状态">
            <el-select v-model="searchParams.status" placeholder="选择状态" clearable style="min-width: 120px;">
              <el-option label="待审核" :value="0"></el-option>
              <el-option label="已通过" :value="1"></el-option>
              <el-option label="已拒绝" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="button-group">
              <el-button type="primary" @click="fetchActivities">查询</el-button>
              <el-button @click="resetSearchParams">重置</el-button>
              <el-button 
                type="info" 
                class="back-button"
                @click="goBack"
                :icon="ArrowLeft"
              >
                返回首页
              </el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </el-card>

    <!-- 活动列表 -->
    <el-empty v-if="activities.length === 0 && !loading" description="暂无活动" />
    <div v-else class="activities-grid" v-loading="loading">
      <el-card v-for="activity in activities" :key="activity.id" class="activity-card">
        <img
          :src="activity.coverUrl"
          class="activity-cover"
          alt="活动封面"
          @error="handleImageError"
        >
        <div class="activity-info">
          <h3>{{ activity.title }}</h3>
          <p class="description">{{ activity.description }}</p>
          <p>开始时间：{{ activity.startTime }}</p>
          <p>结束时间：{{ activity.endTime }}</p>
          <p>最大参与人数：{{ activity.maxParticipants }}人</p>
          <div class="activity-footer">
            <el-tag :type="getActivityStatusType(activity.status)">
              {{ getActivityStatusText(activity.status) }}
            </el-tag>
            <el-tag :type="getRegistrationStatusType(activity.registrationStatus)">
              {{ getRegistrationStatusText(activity.registrationStatus) }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { clubApi } from '../api';
import { ElMessage } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';
import defaultCover from '../assets/default-club-cover.jpg';
import { useRouter } from 'vue-router';

const router = useRouter();
const activities = ref([]);
const loading = ref(false);

// 筛选参数
const searchParams = reactive({
  keyword: '',
  status: null
});

// 返回首页
const goBack = () => {
  router.push('/home');
};

// 获取活动列表
const fetchActivities = async () => {
  loading.value = true;
  try {
    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
    if (!userInfo || !userInfo.id) {
      ElMessage.error('获取用户信息失败');
      return;
    }

    const response = await clubApi.getUserSignUpActivities(
      userInfo.id,
      searchParams.status,
      searchParams.keyword
    );
    
    if (response.code === 200) {
      activities.value = response.data;
    } else {
      ElMessage.error(response.message || '获取活动列表失败');
    }
  } catch (error) {
    console.error('获取活动列表失败:', error);
    ElMessage.error('获取活动列表失败');
  } finally {
    loading.value = false;
  }
};

// 重置筛选条件
const resetSearchParams = () => {
  searchParams.keyword = '';
  searchParams.status = null;
  fetchActivities();
};

// 处理图片加载失败
const handleImageError = (e) => {
  e.target.src = defaultCover;
};

// 活动状态映射
const getActivityStatusType = (status) => {
  const statusMap = {
    '0': 'info',    // 未发布
    '1': 'success', // 已发布
    '2': 'danger',  // 已取消
    '3': 'warning'  // 已延期
  };
  return statusMap[status] || 'info';
};

const getActivityStatusText = (status) => {
  const statusMap = {
    '0': '未发布',
    '1': '已发布',
    '2': '已取消',
    '3': '已延期'
  };
  return statusMap[status] || '未知状态';
};

// 报名状态映射
const getRegistrationStatusType = (status) => {
  const statusMap = {
    0: 'warning',  // 待审核
    1: 'success',  // 已通过
    2: 'danger'    // 已拒绝
  };
  return statusMap[status] || 'info';
};

const getRegistrationStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已通过',
    2: '已拒绝'
  };
  return statusMap[status] || '未知状态';
};

onMounted(() => {
  fetchActivities();
});
</script>

<style scoped>
.my-activities-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f7fafc 0%, #e3f6f5 100%);
  padding: 32px 0 40px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 28px;
}
.page-header h2 {
  font-size: 26px;
  font-weight: bold;
  color: #22577a;
  letter-spacing: 2px;
}

.filter-card {
  max-width: 1100px;
  margin: 0 auto 28px auto;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(100, 200, 180, 0.10);
  border: 1.5px solid #e3e8ee;
  background: #fff;
}

.activity-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 0;
  padding: 18px 0 0 0;
  justify-content: center;
}
.form-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.activity-filter-form .el-form-item {
  margin-right: 24px;
  margin-bottom: 16px;
}
.button-group {
  display: flex;
  align-items: center;
  gap: 15px;
}
.back-button {
  margin-left: 10px;
  transition: all 0.3s;
  background-color: #909399;
  border-color: #909399;
}
.back-button:hover {
  transform: translateX(-5px);
  background-color: #a6a9ad;
  border-color: #a6a9ad;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.activity-card {
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(100, 200, 180, 0.10);
  transition: transform 0.3s, box-shadow 0.3s;
  background: #fff;
  border: 1.5px solid #e3e8ee;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px 0 rgba(100, 200, 180, 0.18);
}
.activity-cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  margin-bottom: 10px;
}
.activity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 10px 18px;
}
.activity-info h3 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 18px;
  color: #333;
}
.activity-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}
.description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.el-tag {
  border-radius: 6px;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
}
.el-button {
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s;
}
.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(100, 200, 180, 0.12);
}
.el-button--primary {
  background: linear-gradient(90deg, #8fd6e1 0%, #b8e1dd 100%);
  border: none;
  color: #22577a;
}
.el-button--primary:hover {
  background: linear-gradient(90deg, #b8e1dd 0%, #8fd6e1 100%);
  color: #38a3a5;
}
.el-button--info {
  background: linear-gradient(90deg, #bfc6d1 0%, #e0e4ea 100%);
  border: none;
  color: #555;
}
.el-button--info:hover {
  background: linear-gradient(90deg, #e0e4ea 0%, #bfc6d1 100%);
  color: #333;
}
.el-empty {
  margin: 60px auto;
}
::-webkit-scrollbar {
  width: 8px;
  background: #e3f6f5;
}
::-webkit-scrollbar-thumb {
  background: #b8e1dd;
  border-radius: 4px;
}
</style>